<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>全局创建组件</h2>
      <tb-header></tb-header>
      <tb-body></tb-body>
      <tb-footer></tb-footer>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 组件的创建分成两种方式
      // 全局创建组件和局部创建组件

      // 全局创建组件
      // 第一个参数是组件名称
      // 第二个参数是选项对象
      // 因为每一个组件其实都是vue实例，所以这个对象里面可以写所有的option,除了el,必须要有tempalte

      // 取名规则
      // 1. 顾名思义
      // 2. 可以使用连字符或者大驼峰取名，用连字符调用

      // 每个组件的tempalte必须只有一个根元素
      // 里面的data，要写成函数，返回一个对象
      Vue.component("TbHeader", {
        // template选项，相当于outerHTML
        template: "<header>淘宝头部</header>",
      });

      Vue.component("TbBody", {
        data() {
          return {
            count: 10,
          };
        },
        template: `
          <div>
            <main>淘宝内容 - {{ count }}</main>
            <div>轮播图</div>
          </div>
        `,
      });

      Vue.component("TbFooter", {
        template: `
          <footer>淘宝底部</footer>
        `,
      });

      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>
